<script setup>
import {ref, watch} from "vue";
import requestUtil from "@/utils/request";
import {ElMessage} from "element-plus";

const resourceTree = ref([])
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true
  },
  outPut: {
    type: String,
    default: '',
    required: true
  },
})

const title = ref('')
const outPut = ref('')
const initHostTreeList = async () => {
  // 获取服务器树型结构数据
  try {
    const res = await requestUtil.get('host/group/list?status=1')
    const data = res.data
    if (data.code === 200) {
      resourceTree.value = data.msg
    } else {
      ElMessage.error(data.msg)
    }
  } catch (error) {
    console.error('Error fetching table data:', error)
    ElMessage.error('请求失败，请稍后再试')
  }
}
initHostTreeList()
watch(
    () => props.dialogVisible,
    () => {
      title.value = props.dialogTitle
      outPut.value = props.outPut
    }
)
const emits = defineEmits(['update:modelValue', 'sendTuple'])

const handleClose = () => {
  emits('update:modelValue', false)
}

// 添加ANSI转义码转换方法
const formatOutput = (text) => {
  return text
      .replace(/redLeft/g, '<br/><br/><span style="color: red">') // 匹配红色开始
      .replace(/redRight/g, '</span>') // 匹配颜色重置
      .replace(/newLine/g, '<br/><br/>') // 匹配颜色重置
      .replace(/\n/g, '<br/>') // 保留换行
}
</script>

<template>
  <el-dialog
      :close-on-click-modal="false"
      :model-value="dialogVisible"
      :title="title"
      width="80%"
      @close="handleClose"
      style="margin-top: 50px"
  >
    <div style="background-color: #2e3436 ;padding: 0 10px 10px 10px">
      <div v-html="formatOutput(outPut)" class="outPutClass"></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.outPutClass {
  color: #d5d5d5;
  font-size: 14px;
  white-space: pre-wrap;
  font-family: monospace;
}
</style>